/* ------------------------------------ STYLE ------------------------------------ */
/* Edit this section to style your thumbnails, zoom area, magnifier etc.           */
/* If the id of your Etalage instance is different, do a find/replace on #etalage. */
/* ------------------------------------------------------------------------------- */

/* Etalage container (large thumb + small thumbs): */
ul#etalage {
	margin-bottom: 50px;
}
/* Large thumbnail: */
#etalage li.etalage_thumb {
	background: white url(../images/loading.gif) center no-repeat;	
	border-radius: 0.5em;
	border: 1px solid #ddd;
	padding: 6px;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}
/* Large thumbnail - image (in case you want to add a border around the image within the frame) */
#etalage img.etalage_thumb_image {
}
/* Small thumbnails: */
#etalage li.etalage_small_thumbs li {
	background: white;
	border: 1px solid #ddd;
	margin: 10px; /* The space between and above the small thumbs */
	padding: 3px;
}
/* The one on the left that makes them slide */
#etalage ul li.etalage_smallthumb_first {
}
/* The one on the right that makes them slide */
#etalage ul li.etalage_smallthumb_last {
}
/* The currently active one */
#etalage ul li.etalage_smallthumb_active {
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}
/* Zoomed image area: */
#etalage li.etalage_zoom_area {
	background: white url(../images/loading.gif) center no-repeat;
	border: 1px solid #ddd;
	margin: 10px; /* The space between the large thumbnail and the zoomed area */
	padding: 6px;
	-webkit-box-shadow: 0 0 10px #ddd;
	-moz-box-shadow: 0 0 10px #ddd;
	box-shadow: 0 0 10px #ddd;
}
/* Magnifier area (thumbnail hovering): */
#etalage li.etalage_magnifier {
	background: white;
	border: 1px solid #bbb;
	
}
/* Optional icon that will apear at the left bottom of the large thumbnail: */
#etalage li.etalage_icon {
	background: url(../images/zoom.gif) no-repeat;
	margin: 20px;
	width: 14px;
	height: 14px;
}
/* Optional hint that will apear at the top right of the large thumbnail: */
#etalage li.etalage_hint {
	background: url(../images/hint.gif) no-repeat;
	margin: 15px; /* The offset to the right-top corner */
	width: 130px;
	height: 57px;
}
/* ------------------------------------ FUNCTIONALITY -------------------------------------- */
/* The following CSS serves to make Etalage function properly. Don't edit or edit carefully. */
/* ----------------------------------------------------------------------------------------- */

#etalage, .etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint {
	display:none
}
.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint {
	margin:0;
	padding:0;
	border:0;
	list-style:none
}
.etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img {
	position:relative
}
.etalage img, .etalage li {
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	-moz-user-drag:none;
	user-drag:none
}
.etalage {
	float:left
}
.etalage li {
	position:absolute
}
.etalage img {
	vertical-align:bottom
}
.etalage_magnifier {
	cursor:default
}
.etalage_magnifier div {
	overflow:hidden
}
.etalage_magnifier div img {
	display:none
}
.etalage_icon, .etalage_hint {
	cursor:default;
	width:0;
	height:0;
	overflow:hidden
}
.etalage_small_thumbs {
	overflow:hidden
}
ul .etalage_small_thumbs li {
	float:left
}
.etalage_zoom_area div {
	overflow:hidden;
	z-index:997
}
ul .etalage_zoom_preview {
	position:absolute;
	z-index:998
}
.etalage_zoom_img {
	z-index:999
}
